<template>
  <view class="concern-box" v-if="false">
    <view class="concern-box-contnet">
      <view class="concern-title">
        <image class="concern-logo" src="@/static/images/brand.jpg"></image>
        易朴文化
      </view>
      <view v-if="isConcern" class="concern-text">已关注</view>
      <view v-else class="no-concern-text" @click="concernPopup">点击关注</view>
    </view>
    <qrcode-modal ref="qr"></qrcode-modal>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getMallListApi } from "@/http/api";
export default {
  name: "concern-banner",
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      isConcern: "user/isConcern",
    }),
  },
  methods: {
    concernPopup() {
      this.$refs.qr.open();
    },
  },
};
</script>

<style scoped>
.concern-box {
  position: fixed;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 750px;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 0 10px #666;
  z-index: 999;
}
.concern-box-contnet {
  box-sizing: border-box;
  width: 640rpx;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 50rpx;
}
.concern-logo {
  width: 50rpx;
  height: 50rpx;
  padding-right: 10rpx;
}
.concern-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
}
.concern-text {
  color: #1aad19;
  border: 1px solid #1aad19;
  
  padding: 0 14rpx;
}
.no-concern-text {
  color: #e64340;
  border: 1px solid #e64340;
  
  padding: 0 14rpx;
}
</style>
